JavaScript InfoVis Toolkit Overview

•

4 likes•3,152 views

philogb

An overview of the JavaScript InfoVis Toolkit and some of the theory behind the implemented visualizations.

Technology

JavaScript InfoVis Toolkit

Nicolas Garcia Belmonte - Dec. 2009

Agenda

• JavaScript InfoVis Toolkit Overview
• Featured Visualizations
• What’s Next for the JIT

JavaScript InfoVis Toolkit

• Web Based Interactive Data
Visualizations
• Multiple Graph/Tree Layouts
• Modular, Extensible, Composable
• Web Standards Based

Modular
Grab only what you need

HyperTree
SunBurst
TreeMap
JavaScript InfoVis
ForceDirected
Toolkit
RGraph
Icicle
SpaceTree

Extensible
• Deﬁne custom Nodes and Edges

• Add Custom Animations (linear, Elastic, etc.)

Composable
Add Visualizations as Node/Edge rendering functions to
other visualizations

Featured Visualizations

• TreeMap
• RGraph
• HyperTree
• SpaceTree

TreeMap

Squariﬁed TreeMaps - Jarke J. van Wick, Mark Bruls, Kees Huizing

Ordered and Quantum TreeMaps - Benjamin B. Bederson, Ben
Shneiderman, Martin Wattenberg

TreeMap
SliceAndDice Squariﬁed Strip

order ordered unordered ordered
aspect ratios very high lowest medium
stability stable medium medium

RGraph

Animated Exploration of Dynamic Graphs with Radial Layout -
Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst

RGraph

• Polar vs. Rectangular Interpolation
• Node Constraints: Orientation and
Ordering
• Linear Transitions vs. EaseIn/Out Transitions

RGraph
Polar vs. Rectangular Interpolation

RGraph
Node Constraints:
Parent - Child angle

HyperTree

A focus+context technique based on Hyperbolic Geometry for
Visualizing large Hierarchies - John Lamping, Ramana Rao, Peter Pirolli

HyperTree
Poincare Disk Model of
Hyperbolic Geometry

Circle Limit IV - Escher

SpaceTree

SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution
and Empirical Evaluation - Catherine Plaisant, Jesse Grosjean, Bemjamin B.
Bederson

SpaceTree
Only show Context-Related Nodes

What’s Next?
• SunBurst
• Force-Directed
• Icicle
• MultiTrees
• etc.

Questions?

Mail: philogb@gmail.com
Project Page: http://thejit.org
Blog: http://blog.thejit.org
GitHub: http://github.com/philogb

Similar to JavaScript InfoVis Toolkit Overview

Evolution of the Graph Schema

Joshua Shinavier

GNO Code: Geospatial Visualization in the Browser - An Overview

Rob Schley

The genesis of Hadoop was in analyzing massive amounts of data with a mapreduce framework. SQL-onHadoop has followed shortly after that, paving a way to the whole schema-on-read notion. Discovering graph relationship in your data is the next logical step. Apache Giraph (modeled on Google’s Pregel) lets you apply the power of BSP approach to the unstructured data. In this talk we will focus on practical advice of how to get up and running with Apache Giraph, start analyzing simple data sets with built-in algorithms and finally how to implement your own graph processing applications using the APIs provided by the project. We will then dive into how Giraph integrates with the Hadoop ecosystem (Hive, HBase, Accumulo, etc.) and will also provide a whirlwind tour of Giraph architecture.

Apache Giraph: start analyzing graph relationships in your bigdata in 45 minu...

rhatr

Mike Goodchild's keynote - GISRUK 2010

GISRUK conference

Bigdata

Abhishek Pamecha

The explosion in growth of the Web of Linked Data has provided, for the first time, a plethora of information in disparate locations, yet bound together by machine-readable, semantically typed relations. Utilisation of the Web of Data has been, until now, restricted to the members of the community, eating their own dogfood, so to speak. To the regular web user browsing Facebook and watching YouTube, this utility is yet to be realised. The primary factor inhibiting uptake is the usability of the Web of Data, where users are required to have prior knowledge of elements from the Semantic Web technology stack. Our solution to this problem is to hide the stack, allowing end users to browse the Web of Data, explore the information it contains, discover knowledge, and use Linked Data. We propose a template-based visualisation approach where information attributed to a given resource is rendered according to the rdf:type of the instance.

Hide the Stack:Toward Usable Linked Data

aba-sah

AgensGraph: a Multi-model Graph Database based on PostgreSql

Kisung Kim

A Graph is a Graph is a Graph: Equivalence, Transformation, and Composition o...

Joshua Shinavier

Ling liu part 01：big graph processing

jins0618

About Scanning and Metadata Standards - NEMO 2010

University of Connecticut Libraries Map and Geographic Information Center - MAGIC

Spark summit europe 2015 magellan

Ram Sriharsha

Apache con big data 2015 magellan

Ram Sriharsha

This session explores building graph databases on AWS, examining common use cases, design patterns, and best practices. We then discuss the main options for running graph databases on AWS and go deeper into the Amazon DynamoDB storage backend plugin for Titan launched earlier this year. The Amazon Fulfillment team will share their story of running the Titan graph database on DynamoDB to track inventory going in and out of the company's fulfillment network. They provide best practices on running an efficient graph database at massive scale.

(DAT203) Building Graph Databases on AWS

Amazon Web Services

Cheetah:Data Warehouse on Top of MapReduce

Tilani Gunawardena PhD(UNIBAS), BSc(Pera), FHEA(UK), CEng, MIESL

Easing embedding learning by comprehensive transcription of heterogeneous inf...

paper_reader

Graph Databases

thai

“Which visualization library should I use?” Typically, making this decision is not about whether one library is “better” than another, but whether the specific library is more suitable for what the developer is trying to achieve.To answer this question thoroughly, we need to better understand the design space of visualization libraries. The talk will give a tour of many kinds of visualization libraries on the web across the design space, while explaining the framework and design philosophy that the audience can learn along the way. The audience will expand their horizon and be more aware of the wide universe of libraries. The next time they come across a new package, they can use this framework as a lens to analyze its own offerings and how it is different from or similar to the libraries that they already know.

Navigating the Wide World of Data Visualization Libraries

Krist Wongsuphasawat

Bigdata analytics

Keshav Tripathy

RTree Spatial Indexing with MongoDB - MongoDC

Nicholas Knize, Ph.D., GISP

Grails goes Graph

darthvader42

Similar to JavaScript InfoVis Toolkit Overview (20)

Evolution of the Graph Schema

GNO Code: Geospatial Visualization in the Browser - An Overview

Apache Giraph: start analyzing graph relationships in your bigdata in 45 minu...

Mike Goodchild's keynote - GISRUK 2010

Bigdata

Hide the Stack:Toward Usable Linked Data

AgensGraph: a Multi-model Graph Database based on PostgreSql

A Graph is a Graph is a Graph: Equivalence, Transformation, and Composition o...

Ling liu part 01：big graph processing

About Scanning and Metadata Standards - NEMO 2010

Spark summit europe 2015 magellan

Apache con big data 2015 magellan

(DAT203) Building Graph Databases on AWS

Cheetah:Data Warehouse on Top of MapReduce

Easing embedding learning by comprehensive transcription of heterogeneous inf...

Graph Databases

Navigating the Wide World of Data Visualization Libraries

Bigdata analytics

RTree Spatial Indexing with MongoDB - MongoDC

Grails goes Graph

More from philogb

OpenVisConf - WebGL for graphics and data visualization

philogb

From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...

philogb

From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...

philogb

The Geography of Tweets - BBC Developer Conference

philogb

Hacking public-facing data visualizations at Twitter

philogb

#interactives at Twitter

philogb

#interactives at Twitter

philogb

Présentation faite à SudWeb http://sudweb.fr/2013. Liens pour les visualisations: * Home page: http://philogb.github.io/ * Librairies: http://senchalabs.org/philogl et http://thejit.org/ * Wind map: http://philogb.github.io/wind-motion-patterns/ * Elections 2012: http://philogb.github.io/political-engagement-map/ * Coupe d'europe 2012: http://philogb.github.io/eurocup-2012/ * Neil armstrong: http://philogb.github.io/neil-armstrong/

La visualisation de données comme outil pour découvrir et partager des idées ...

philogb

Exploring Web standards for data visualization

philogb

JavaScript para Graficos y Visualizacion de Datos - BogotaJS

philogb

JavaScript para Graficos y Visualizacion de Datos

philogb

InfoVis para la Web: Teoria, Herramientas y Ejemplos.

philogb

Nuevas herramientas de visualizacion en JavaScript

philogb

Data visualization for the web

philogb

Leaving Flatland: Getting Started with WebGL- SXSW 2012

philogb

Principles of Analytical Design - Visually Meetup - Sept. 2011

philogb

New Tools for Visualization in JavaScript - Sept. 2011

philogb

PhiloGL - WebGLCamp Google HQs - June 2011

philogb

Using Web Standards to create Interactive Data Visualizations for the Web

philogb

More from philogb (19)

OpenVisConf - WebGL for graphics and data visualization

From Data Journalism to Data Illustration - Visualizing Data with JavaScript ...

The Geography of Tweets - BBC Developer Conference

Hacking public-facing data visualizations at Twitter

#interactives at Twitter

La visualisation de données comme outil pour découvrir et partager des idées ...

Exploring Web standards for data visualization

JavaScript para Graficos y Visualizacion de Datos - BogotaJS

JavaScript para Graficos y Visualizacion de Datos

InfoVis para la Web: Teoria, Herramientas y Ejemplos.

Nuevas herramientas de visualizacion en JavaScript

Data visualization for the web

Leaving Flatland: Getting Started with WebGL- SXSW 2012

Principles of Analytical Design - Visually Meetup - Sept. 2011

New Tools for Visualization in JavaScript - Sept. 2011

PhiloGL - WebGLCamp Google HQs - June 2011

Using Web Standards to create Interactive Data Visualizations for the Web

Recently uploaded

CNIC Information System with Pakdata Cf In Pakistan

danishmna97

Understanding the FAA Part 107 License ..

Christopher Logan Kennedy

In this session, we will discuss the journey of API governance from its initial, ungoverned state to the development of sophisticated models that tackle contemporary challenges. We'll explore how APIs have become essential in the intersection of business and technology, adapting to advancements and evolving needs. We'll focus on how organizations have moved from launching to monetizing APIs, using models like pay-per-use and subscriptions, and finding the right balance between technical implementation and business strategy. We'll also highlight the impact of governance on monetization strategies, especially how data security, compliance, and service quality influence pricing. Real-world examples will demonstrate the effective integration of governance with monetization, including AI's role in dynamic pricing. Looking ahead, we'll share insights into future trends in API governance and monetization, emphasizing the importance of adaptability, continuous learning, and innovation.

API Governance and Monetization - The evolution of API governance

WSO2

Join our latest Connector Corner webinar to discover how UiPath Integration Service revolutionizes API-centric automation in a 'Quote to Cash' process—and how that automation empowers businesses to accelerate revenue generation. A comprehensive demo will explore connecting systems, GenAI, and people, through powerful pre-built connectors designed to speed process cycle times. Speakers: James Dickson, Senior Software Engineer Charlie Greenberg, Host, Product Marketing Manager

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

DianaGray10

Stronger Together: Developing an Organizational Strategy for Accessible Desig...

caitlingebhard1

Vector Search -An Introduction in Oracle Database 23ai.pptx

Remote DBA Services

The microservices honeymoon is over. When starting a new project or revamping a legacy monolith, teams started looking for alternatives to microservices. The Modular Monolith, or 'Modulith', is an architecture that reaps the benefits of (vertical) functional decoupling without the high costs associated with separate deployments. This talk will delve into the advantages and challenges of this progressive architecture, beginning with exploring the concept of a 'module', its internal structure, public API, and inter-module communication patterns. Supported by spring-modulith, the talk provides practical guidance on addressing the main challenges of a Modultith Architecture: finding and guarding module boundaries, data decoupling, and integration module-testing. You should not miss this talk if you are a software architect or tech lead seeking practical, scalable solutions. About the author With two decades of experience, Victor is a Java Champion working as a trainer for top companies in Europe. Five thousands developers in 120 companies attended his workshops, so he gets to debate every week the challenges that various projects struggle with. In return, Victor summarizes key points from these workshops in conference talks and online meetups for the European Software Crafters, the world’s largest developer community around architecture, refactoring, and testing. Discover how Victor can help you on victorrentea.ro : company training catalog, consultancy and YouTube playlists.

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024

Victor Rentea

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

In this keynote, Asanka Abeysinghe, CTO,WSO2 will explore the shift towards platformless technology ecosystems and their importance in driving digital adaptability and innovation. We will discuss strategies for leveraging decentralized architectures and integrating diverse technologies, with a focus on building resilient, flexible, and future-ready IT infrastructures. We will also highlight WSO2's roadmap, emphasizing our commitment to supporting this transformative journey with our evolving product suite.

Platformless Horizons for Digital Adaptability

WSO2

WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...

WSO2

Retrieval augmented generation (RAG) is the most popular style of large language model application to emerge from 2023. The most basic style of RAG works by vectorizing your data and injecting it into a vector database like Milvus for retrieval to augment the text output generated by an LLM. This is just the beginning. One of the ways that we can extend RAG, and extend AI, is through multilingual use cases. Typical RAG is done in English using embedding models that are trained in English. In this talk, we’ll explore how RAG could work in languages other than English. We’ll explore French, Chinese, and Polish.

Introduction to Multilingual Retrieval Augmented Generation (RAG)

Zilliz

Webinar Recording: https://www.panagenda.com/webinars/why-teams-call-analytics-is-critical-to-your-entire-business Nothing is as frustrating and noticeable as being in an important call and being unable to see or hear the other person. Not surprising then, that issues with Teams calls are among the most common problems users call their helpdesk for. Having in depth insight into everything relevant going on at the user’s device, local network, ISP and Microsoft itself during the call is crucial for good Microsoft Teams Call quality support. To ensure a quick and adequate solution and to ensure your users get the most out of their Microsoft 365. But did you know that ‘bad calls’ are also an excellent indicator of other problems arising? Precisely because it is so noticeable!? Like the canary in the mine, bad calls can be early indicators of problems. Problems that might otherwise not have been noticed for a while but can have a big impact on productivity and satisfaction. Join this session by Christoph Adler to learn how true Microsoft Teams call quality analytics helped other organizations troubleshoot bad calls and identify and fix problems that impacted Teams calls or the use of Microsoft365 in general. See what it can do to keep your users happy and productive! In this session we will cover - Why CQD data alone is not enough to troubleshoot call problems - The importance of attributing call problems to the right call participant - What call quality analytics can do to help you quickly find, fix-, and prevent problems - Why having retrospective detailed insights matters - Real life examples of how others have used Microsoft Teams call quality monitoring to problem shoot problems with their ISP, network, device health and more.

Why Teams call analytics are critical to your entire business

panagenda

Architecting Cloud Native Applications

WSO2

💥 You’re lucky! We’ve found two different (lead) developers that are willing to share their valuable lessons learned about using UiPath Document Understanding! Based on recent implementations in appealing use cases at Partou and SPIE. Don’t expect fancy videos or slide decks, but real and practical experiences that will help you with your own implementations. 📕 Topics that will be addressed: • Training the ML-model by humans: do or don't? • Rule-based versus AI extractors • Tips for finding use cases • How to start 👨‍🏫👨‍💻 Speakers: o Dion Morskieft, RPA Product Owner @Partou o Jack Klein-Schiphorst, Automation Developer @Tacstone Technology

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

UiPathCommunity

Elevate Developer Efficiency & build GenAI Application with Amazon Q

Bhuvaneswari Subramani

Following the popularity of "Cloud Revolution: Exploring the New Wave of Serverless Spatial Data," we're thrilled to announce this much-anticipated encore webinar. In this sequel, we'll dive deeper into the Cloud-Native realm by uncovering practical applications and FME support for these new formats, including COGs, COPC, FlatGeoBuf, GeoParquet, STAC, and ZARR. Building on the foundation laid by industry leaders Michelle Roby of Radiant Earth and Chris Holmes of Planet in the first webinar, this second part offers an in-depth look at the real-world application and behind-the-scenes dynamics of these cutting-edge formats. We will spotlight specific use-cases and workflows, showcasing their efficiency and relevance in practical scenarios. Discover the vast possibilities each format holds, highlighted through detailed discussions and demonstrations. Our expert speakers will dissect the key aspects and provide critical takeaways for effective use, ensuring attendees leave with a thorough understanding of how to apply these formats in their own projects. Elevate your understanding of how FME supports these cutting-edge technologies, enhancing your ability to manage, share, and analyze spatial data. Whether you're building on knowledge from our initial session or are new to the serverless spatial data landscape, this webinar is your gateway to mastering cloud-native formats in your workflows.

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Safe Software

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Juan lago vázquez

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Edi Saputra

Three things you will take away from the session: • How to run an effective tenant-to-tenant migration • Best practices for before, during, and after migration • Tips for using migration as a springboard to prepare for Copilot in Microsoft 365 Main ideas: Migration Overview: The presentation covers the current reality of cross-tenant migrations, the triggers, phases, best practices, and benefits of a successful tenant migration Considerations: When considering a migration, it is important to consider the migration scope, performance, customization, flexibility, user-friendly interface, automation, monitoring, support, training, scalability, data integrity, data security, cost, and licensing structure Next Wave: The next wave of change includes the launch of Copilot, which requires businesses to be prepared for upcoming changes related to Copilot and the cloud, and to consolidate data and tighten governance ShareGate: ShareGate can help with pre-migration analysis, configurable migration tool, and automated, end-user driven collaborative governance

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

sammart93

Six Myths about Ontologies: The Basics of Formal Ontology

johnbeverley2021

Recently uploaded (20)

CNIC Information System with Pakdata Cf In Pakistan

Understanding the FAA Part 107 License ..

API Governance and Monetization - The evolution of API governance

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

Stronger Together: Developing an Organizational Strategy for Accessible Desig...

Vector Search -An Introduction in Oracle Database 23ai.pptx

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024

How to Troubleshoot Apps for the Modern Connected Worker

Platformless Horizons for Digital Adaptability

WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...

Introduction to Multilingual Retrieval Augmented Generation (RAG)

Why Teams call analytics are critical to your entire business

Architecting Cloud Native Applications

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

Elevate Developer Efficiency & build GenAI Application with Amazon Q

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

Six Myths about Ontologies: The Basics of Formal Ontology

JavaScript InfoVis Toolkit Overview

1. JavaScript InfoVis Toolkit Nicolas Garcia Belmonte - Dec. 2009

2. Agenda • JavaScript InfoVis Toolkit Overview • Featured Visualizations • What’s Next for the JIT

3. JavaScript InfoVis Toolkit • Web Based Interactive Data Visualizations • Multiple Graph/Tree Layouts • Modular, Extensible, Composable • Web Standards Based

4. Modular Grab only what you need HyperTree SunBurst TreeMap JavaScript InfoVis ForceDirected Toolkit RGraph Icicle SpaceTree

5. Extensible • Deﬁne custom Nodes and Edges • Add Custom Animations (linear, Elastic, etc.)

6. Composable Add Visualizations as Node/Edge rendering functions to other visualizations

7. Featured Visualizations • TreeMap • RGraph • HyperTree • SpaceTree

8. TreeMap Squariﬁed TreeMaps - Jarke J. van Wick, Mark Bruls, Kees Huizing Ordered and Quantum TreeMaps - Benjamin B. Bederson, Ben Shneiderman, Martin Wattenberg

9. TreeMap A B C D E F

10. TreeMap A B C D F E

11. TreeMap SliceAndDice Squariﬁed Strip order ordered unordered ordered aspect ratios very high lowest medium stability stable medium medium

12. TreeMap Examples

13. RGraph Animated Exploration of Dynamic Graphs with Radial Layout - Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst

14. RGraph • Polar vs. Rectangular Interpolation • Node Constraints: Orientation and Ordering • Linear Transitions vs. EaseIn/Out Transitions

15. RGraph Polar vs. Rectangular Interpolation

16. RGraph Node Constraints: Parent - Child angle

17. RGraph Node Constraints: Child Ordering

18. RGraph Slow-in, slow-out Transitions

19. RGraph Examples

20. HyperTree A focus+context technique based on Hyperbolic Geometry for Visualizing large Hierarchies - John Lamping, Ramana Rao, Peter Pirolli

21. HyperTree Poincare Disk Model of Hyperbolic Geometry Circle Limit IV - Escher

22. HyperTree Examples

23. SpaceTree SpaceTree: Supporting Exploration in Large Node Link Tree, Design Evolution and Empirical Evaluation - Catherine Plaisant, Jesse Grosjean, Bemjamin B. Bederson

24. SpaceTree A B C D E F

25. SpaceTree Only show Context-Related Nodes

26. SpaceTree Examples

27. What’s Next? • SunBurst • Force-Directed • Icicle • MultiTrees • etc.

28. What’s Next? SunBurst Visualization

29. What’s Next? Force-Directed Layout

30. What’s Next MultiTrees

31. Questions? Mail: philogb@gmail.com Project Page: http://thejit.org Blog: http://blog.thejit.org GitHub: http://github.com/philogb